<template>
  <div>
    <logo />
    <el-scrollbar>
      <el-menu
        :collapse="false"
        :unique-opened="true"
        :collapse-transition="true"
        background-color="rgb(48, 65, 86)"
        text-color="#fff"
        active-text-color="rgb(24, 144, 255)"
        mode="vertical"
        v-if="sidebarRouters.length > 0"
      >
        <div v-for="(item, i) in sidebarRouters" :key="i">
          <el-submenu
            v-if="item.children && item.children.length > 0"
            :index="i + ''"
          >
            <template slot="title">
              <i :class="item.meta.icon"></i>
              <span>{{ item.meta.title }}</span>
            </template>
            <el-menu-item
              v-for="(cd_im, idx) in item.children"
              :key="idx"
              :index="i + '-' + idx + ''"
              ><i :class="cd_im.meta.icon"></i
              >{{ cd_im.meta.title }}</el-menu-item
            >
          </el-submenu>

          <el-menu-item v-else :index="i + ''">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import logo from "../../common/sidebar/logo";
export default {
  data() {
    return {
      sidebarRouters: [
        {
          meta: {
            icon: "el-icon-s-marketing",
            title: "电梯数据",
          },
          children: [
            {
              meta: {
                icon: "el-icon-s-promotion",
                title: "区域管理",
              },
            },
            {
              meta: {
                icon: "el-icon-s-promotion",
                title: "电梯资料",
              },
            },
            {
              meta: {
                icon: "el-icon-s-promotion",
                title: "设备注册管理",
              },
              meta: {
                icon: "el-icon-s-promotion",
                title: "设备在线列表",
              },
            },
            {
              meta: {
                icon: "el-icon-s-promotion",
                title: "在线电梯分布",
              },
            },
            {
              meta: {
                icon: "el-icon-s-promotion",
                title: "电梯运行监控",
              },
            },
            {
              meta: {
                icon: "el-icon-s-promotion",
                title: "电梯品牌",
              },
            },
          ],
        },
        {
          meta: {
            icon: "el-icon-location",
            title: "系统监控",
          },
        },
      ],
    };
  },
  components: { logo },
};
</script>
<style lang="scss">
.el-menu-item:hover,
.el-submenu:hover,
.el-submenu__title:hover {
  background-color: rgb(3, 19, 33) !important;
}
</style>